<template>
  <div class="newsInfo-container">
    <!-- 地址栏中,直接卸载/后的参数，用$route.params.key接收。若写在?后的参数，用query接收 -->
    <h3 class="title">{{news.title}}</h3>
    <p class="subTitle">
      <span>发表时间:{{news.publishTime}}</span>
      <span>点击:{{news.click}}次</span>
    </p>
    <hr>
    <!-- 内容区域 -->
    <div class="content" v-html="news.content">

    </div>
    <!-- 评论子组件 -->
    <Comment-box :id="this.id"></Comment-box>
  </div>
</template>

<script>
//1.导入子组件
import Comment from '../subComponents/Comment.vue'
export default {
  data () {
    return {
      id: this.$route.params.id, //将url中传过来的参数id，挂在到data上，方便以后调用。
      news: {}
    }
  },
  created () {
    this.getNewsInfo();
  },
  methods: {
    getNewsInfo () {
      this.$ajax.get('../../src/static/news.json').then((res) => {
        this.news = res.data[this.id - 1]      //res.data可根据你的数据格式来，看需求
        console.log(this.news) //打印看看数据吧
      })
    }
  },
  components: {
    "Comment-box": Comment
  }
}
</script>
<style lang="scss">
.newsInfo-container {
  padding: 0 4px;
  .title {
    font-size: 16px;
    text-align: center;
    margin: 15px 0;
    color: black;
  }
  .subTitle {
    // color: blue;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
  }
  .content {
    img {
      width: 100%;
    }
    .bjh-strong {
      font-size: 15px;
      color: #333;
      font-weight: 700;
    }
  }
}
</style>

